<template>
  <div style="width:100%">
    <a-tabs v-model="key" @change="tabChange">
      <!-- 法律条文 -->
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="unordered-list" />
          法律条文
        </span>
        <div style="width:100%;height: 700px;overflow: auto;">
          <a-collapse v-model="activeKey" :bordered="false" v-for="(item, index) in listData" :key="index">
            <template #expandIcon="props">
              <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
            </template>
            <a-collapse-panel :key="String(index)" :header="item.title" :style="customStyle">
              <p v-if="consWords && consWords.length > 0" v-html="item.contentHtml"></p>
              <p v-else  class="content-font-style"> 
                {{ item.content }}
              </p>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="book" />
          法律文书
        </span>
        <div style="width:100%;">
          <iframe id="iframe" :src="fileUrl" width="100%" height="700px" scrolling="yes" frameborder="0" />
        </div>
      </a-tab-pane>
      <div slot="tabBarExtraContent">
        <a-button icon="rollback" type="primary" @click="rollBack"> 返回 </a-button>
      </div>
    </a-tabs>
  </div>

</template>

<script>
import { getConWords } from '@/api/law/law_doc'
import { getLawItemDetail } from '@/api/law/law_provision'
import { kkfilePreview } from '@/utils/util'
import { getUrl } from '@/api/base/file.js'
import { Tp_provisionList } from '@/enumeration/Tp_provision'
export default {
  props: {
    docInfo: {
      // 文件di
      type: Object,
      required: true
    },
    keyWord: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      key: '1', // 卡片切换key
      customStyle:
        'background: #f7f7f7;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden;font-size:18px;font-weight: bold;',
      activeKey: [],
      listData: [],
      loading: false,
      ubordered: true, // 表格边框是否显示
      fileUrl: '', //文件的预览地址
      Tp_provisionList: Tp_provisionList, // 法律条文类别
      provisionList: [], //法律条文类别下拉框数据
      consWords: [], // 分词字段
    }
  },
  components: {},
  async created() {
    await this.getConWords()
    this.getDetailData()
  },
  watch: {
    activeKey(key) {
      console.log(key)
    },
  },
  mounted() {},
  methods: {
    rollBack() {
      this.$emit("closeShowDocDetail")
    },
    getFileUrl() {
      let _this = this
      getUrl({ id: this.docInfo.fileid }).then((res) => {
        if (res.code == 0) {
          _this.fileUrl = _this.getViewfileUrl(res.data)
          if (_this.fileUrl == '' || _this.fileUrl == null || _this.fileUrl == undefined) {
            _this.$message.error('当前文件的查看地址为空，无法查看')
          }
        } else {
          _this.$message.error('获取文件下载地址失败')
          _this.fileUrl = ''
        }
      })
    },
    /**
     * 获取kkfile预览的文件地址
     * @param {} url
     */
    getViewfileUrl(url) {
      return kkfilePreview(url)
    },
    // tab切换事件
    tabChange(key) {
      this.key = key
      if (key == '2') {
        if (this.docInfo.fileid != '' && this.docInfo.fileid != undefined) {
          this.getFileUrl()
        } else {
          this.$message.error('当前未上传附件')
          this.key = '1'
        }
      }
    },
    /**
     * 获取输入分词
     */
    async getConWords() {
      let _this = this
      this.consWords = []
       await getConWords({ keyWord: _this.keyWord }).then((res) => {
        if (res.code !== 0) {
          _this.$message.error('获取数据失败')
        } else {
          _this.consWords = res.data
        }
      })
     },
    /**
     * 获取法律条文的具体细项数据
     */
    getDetailData() {
      let _this = this
      getLawItemDetail({ docid: this.docInfo.id }).then((res) => {
        if (res.code !== 0) {
          this.$message.error('获取数据失败')
        } else {
          _this.listData = res.data
          // 进行分词字段标红
          if (this.consWords && this.consWords.length > 0) {
            // 拼接对应的字段
            if (this.listData && this.listData.length > 0) {
              for (let element of this.listData) {
                let contentStr = element.content
                let html = "<p>" + element.content + "</p>"
                for (let conword of this.consWords) { 
                  if (html.indexOf(conword) > 0) {
                    html = html.replace(conword,"<span style='color:#CA0000;'>" + conword + "</span>")
                  }
                }
                element.contentHtml = html
              }
            }
          } 
          // 默认展开全部的法规
          this.activeKey = []
          for (let index in this.listData) {
            this.activeKey.push(String(index))
          }
        }
      })
    },

    /**
     * 有效性显示转换
     */
    typeLable(val) {
      for (let key in this.Tp_provisionList) {
        if (this.Tp_provisionList[key].value == val) {
          return this.Tp_provisionList[key].name
        }
      }
      return val
    },
  },
}
</script>

<style lang="scss" scoped>

::v-deep .ant-tabs-tab > span {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 800;
  // color: #2c2c2c;
}


.content-font-style {
  font-size: 16px;
  font-weight: bold;
}

.content-font-red {
  font-size: 16px;
  font-weight: bold;
  color: '#CA0000';
}
</style>